<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI路径优化助手</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=003df4ac18f1cca97eaf59dc90afbaa2&plugin=AMap.Scale,AMap.ToolBar,AMap.Geocoder,AMap.Driving"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>🚄✈️🚌 AI路径优化助手</h1>
            <p>智能规划您的出行路线，让旅行更简单</p>
            <div id="api-status" class="api-status">API状态加载中...</div>
        </header>

        <!-- 顶部搜索栏 -->
        <div class="top-search-bar">
            <div class="search-form-horizontal">
                <div class="search-item">
                    <label for="origin">出发地</label>
                    <div class="search-container">
                        <input type="text" id="origin" placeholder="请输入出发地..." autocomplete="off">
                        <div id="origin-suggestions" class="suggestions"></div>
                    </div>
                </div>
                <div class="search-item">
                    <label for="origin-address">出发地址</label>
                    <input type="text" id="origin-address" placeholder="详细地址（可选）..." autocomplete="off">
                </div>
                <div class="search-item">
                    <label for="destination">目的地</label>
                    <div class="search-container">
                        <input type="text" id="destination" placeholder="请输入目的地..." autocomplete="off">
                        <div id="destination-suggestions" class="suggestions"></div>
                    </div>
                </div>
                <div class="search-item">
                    <label for="destination-address">到达地址</label>
                    <input type="text" id="destination-address" placeholder="详细地址（可选）..." autocomplete="off">
                </div>
                <div class="search-item">
                    <label for="departure-date">出发日期</label>
                    <input type="date" id="departure-date" required>
                </div>
                <div class="search-item">
                    <label for="optimization-type">优化类型</label>
                    <select id="optimization-type">
                        <option value="time">时间优先</option>
                        <option value="price">价格优先</option>
                        <option value="composite">综合优先（推荐）</option>
                    </select>
                </div>
                <button id="search-btn" class="search-btn-main">🚀 搜索路线</button>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧地图区域 -->
            <div class="map-section">
                <div class="map-header">
                    <h2>🗺️ 路线地图</h2>
                    <div class="map-controls">
                        <button class="control-btn" onclick="getCurrentLocation()">📍 我的位置</button>
                        <button class="control-btn" onclick="clearRoute()">🗑️ 清除路线</button>
                        <button class="control-btn" onclick="toggleTraffic()">🚦 路况</button>
                    </div>
                </div>
                <div id="mapContainer" class="map-container"></div>
                
                <!-- 路线信息面板 -->
                <div class="route-info-panel" id="route-info-panel" style="display: none;">
                    <h3>📋 路线详情</h3>
                    <div id="route-details"></div>
                </div>
            </div>

            <!-- 右侧AI助手区域 -->
            <div class="ai-section">
                <div class="ai-header">
                    <h2>🤖 AI智能助手</h2>
                    <div class="ai-status">
                        <span class="status-dot"></span>
                        <span>在线</span>
                    </div>
                </div>
                <div class="chat-container">
                    <div id="chat-messages" class="chat-messages">
                        <div class="message bot-message">
                            <div class="message-content">
                                您好！我是您的出行助手，可以帮您规划最优路线。请告诉我您的出行需求，比如"明天从北京到上海"。
                            </div>
                        </div>
                    </div>
                    <div class="chat-input">
                        <input type="text" id="user-input" placeholder="请输入您的出行需求...">
                        <button id="send-btn">发送</button>
                    </div>
                </div>
                
                <!-- 智能功能快捷按钮 -->
                <div class="ai-shortcuts">
                    <h3>💡 快捷功能</h3>
                    <div class="shortcut-buttons">
                        <button class="shortcut-btn" onclick="askWeather()">🌤️ 天气查询</button>
                        <button class="shortcut-btn" onclick="askPoi()">🏢 附近搜索</button>
                        <button class="shortcut-btn" onclick="askLocation()">📍 位置定位</button>
                        <button class="shortcut-btn" onclick="askRoute()">🚗 路线规划</button>
                    </div>
                </div>
            </div>

            <!-- 结果展示区域 -->
            <div class="results-section" id="results-section" style="display: none;">
                <h2>推荐路线</h2>
                <div id="routes-container" class="routes-container">
                    <!-- 路线结果将在这里显示 -->
                </div>
            </div>
        </div>

        <!-- 加载提示 -->
        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>正在为您搜索最优路线...</p>
        </div>

        <!-- 使用说明 -->
        <div class="help-section">
            <h3>使用说明</h3>
            <div class="help-content">
                <div class="help-item">
                    <strong>快速搜索：</strong>选择出发地、目的地和日期，系统会自动为您推荐最优路线
                </div>
                <div class="help-item">
                    <strong>AI对话：</strong>用自然语言描述您的需求，如"明天从北京到上海，价格优先"
                </div>
                <div class="help-item">
                    <strong>智能功能：</strong>AI助手会自动帮您查询天气、定位地址、搜索景点等，无需手动操作
                </div>
                <div class="help-item">
                    <strong>示例对话：</strong>"北京明天天气如何？"、"上海有什么好玩的？"、"帮我规划去广州的路线"
                </div>
            </div>
        </div>
    </div>

    <script src="script.js?v=realtime-3"></script>
</body>
</html>